<template>
  <div class="wrapper">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      :router="false">
      <template v-for="route in menuList">
        <!-- 没有子路由直接展示 -->
        <template v-if="!route.children">
          <el-menu-item v-if="route.meta.hidden" :index="route.path" @click="handleClick(route.path)" >
            <template #title>
              <span>{{ route.meta.title }}</span>
            </template>
        </el-menu-item>
        </template>
       <!-- 有一个子路由直接展示子路由 不必展示负路由 -->
        <template v-if="route.children && route.children.length === 1">
          <el-menu-item v-if="route.children[0].meta.hidden" :index="route.children[0].path" @click="handleClick(route.children[0].path)" >
              <template #title>
                <span>{{ route.children[0].meta.title }}</span>
              </template>
          </el-menu-item>
        </template>
       <!-- 有多个子路由进行组件递归处理 -->
        <el-submenu v-if="route.children && route.children.length > 1" :index="route.path" @click="handleClick(route.path)" >
          <template #title>
              <span>{{ route.meta.title }}</span>
            </template>
          <MenuListComp :menuList="route.children"></MenuListComp>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>
<script>
export default {
  name: "MenuListComp",
  props: ['menuList'],
  components: {
    // 局部注册组件
    MenuListComp: () => import('./MenuListComp.vue') 
  },
  methods:{
    handleClick(path){
      this.$router.push(path)
    }
  }
}
</script>